<template>
  <el-dialog
    class="ac-dialog-container"
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    append-to-body
    :width="width"
    ref="elDialog"
    :id="id"
    :center="center"
    >
    <span v-if="show">
      <slot></slot>
    </span>

    <span v-if="action" slot="footer" class="dialog-footer" v-loading="loading"
      :element-loading-text="loadingText">
      <slot name="action">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit" >确 定</el-button>
      </slot>
    </span>
  </el-dialog>
</template>

<script>
export default {
    name: 'AcDialog',
    props: {
        dialog: Boolean,
        loadingText: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: '600px'
        },
        form: {
            type: Boolean,
            default: true
        },
        center: {
            type: Boolean,
            default: false
        },
        action: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        show() {
            if (this.form) {
                return this.showForm
            } else {
                return true
            }
        }
    },
    data() {
        return {
            loading: false,
            dialogVisible: this.visible,
            id: 'dialog_' + new Date().getTime(),
            showForm: false
        }
    },
    methods: {
        close() {
            this.dialogVisible = false
        },
        submit() {
            this.loading = true
            this.$emit('submit')
        },
        end() {
            this.loading = false
        }
    },
    watch: {
        // 一定要这么写
        dialogVisible(val) {
            if (!val) {
                this.loading = false
                this.$emit('close')
                setTimeout(() => {
                    this.showForm = false
                }, 300)
            } else {
                this.showForm = true
            }
        },
        dialog(val) {
            this.dialogVisible = val
        }
    }
}
</script>

<style lang="scss" scoped>
.ac-dialog-container{
  .el-dialog__footer{
    margin: 0 20px;
    // border-top: 1px dashed #ccc;
    padding: 15px 0 16px;
    text-align: center;
    position: relative;

    .dialog-footer{
      display: block;

      .circular{
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        height: 24px;
      }

      .el-loading-text{
        display: inline-block;
        vertical-align: middle;
      }

      .el-loading-spinner{
        margin-top: -12px;
      }
    }
  }
}
</style>
